<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <el-menu :collapse="isCollapse"
               background-color="#304156"
               text-color="#b2bfcd"
               active-text-color="#3b8ee5"
               style="height: 100%"
               class="el-menu-vertical-demo"
               router>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-edit"></i>
            <span slot="title"> 博客管理</span>
          </template>
          <el-menu-item index="/blog/blogManager">
            <i class="el-icon-notebook-1"></i>
            <span slot="title"> 博客管理</span>
          </el-menu-item>
          <el-menu-item index="/label/labelManager">
            <i class="el-icon-folder-opened"></i>
            <span slot="title"> 标签管理</span>
          </el-menu-item>
          <el-menu-item index="/type/typeManager">
            <i class="el-icon-brush"></i>
            <span slot="title"> 分类管理</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>

      <el-container>
        <el-header>
          <el-breadcrumb separator="/" style="font-size: 18px; height: 60px; line-height: 60px">
            <el-breadcrumb-item>
              <i :class="isCollapseIcon" v-model="isCollapse" v-on:click="handleManager"></i>
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/manager' }">首页</el-breadcrumb-item>
            <el-dropdown trigger="click" class="avatar_center">
              <el-avatar :size="40" :src="admin.avatar"></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-show="admin.status===false" @click.native="login">
                  <i class="fa fa-sign-in" aria-hidden="true"></i>登录
                </el-dropdown-item>
                <el-dropdown-item v-show="admin.status===true" @click.native="signOut">
                  <i class="fa fa-sign-out" aria-hidden="true"></i>注销
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-breadcrumb>
        </el-header>

        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import qs from 'qs'

export default {
  inject: ['reload'],
  name: "Manager",
  data() {
    return {
      isCollapse: false,
      isCollapseIcon: "el-icon-s-fold",
      admin: this.$store.state.admin,
    };
  },
  methods: {
    handleManager() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.isCollapseIcon = "el-icon-s-unfold";
      } else {
        this.isCollapseIcon = "el-icon-s-fold";
      }
    },
    signOut() {
      localStorage.removeItem("admin");
      this.$store.commit("signOut");
      this.axios.post("/user/signOut",qs.stringify({
        username: this.admin.username
      })).then((response)=>{

      });
      window.location.reload();
    },
  },
  watch: {
    "$store.state.admin"(){
      this.admin = this.$store.getters.getAdmin;
    }
  },
  created() {
    if (localStorage.getItem("admin") !=null){
      this.admin = JSON.parse(localStorage.getItem("admin"));
      this.$store.commit("setAdmin",this.admin);
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-header{
  text-align: right;
  font-size: 12px;
  border-bottom: 1px solid gray;
}
.el-avatar{
  vertical-align: middle;

}
</style>
